<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
    *{      
      -webkit-touch-callout: auto; /* prevent callout to copy image, etc when tap to hold */      
      -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */      
      -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */       
      -webkit-user-select:none;
    }  
    html,body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      max-width: 800px;
    }
    #paper {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-top: 75%;
      height: 0px;
    }
  </style>
</head>
<body>
  <div>fps: <span id="fps">--</span> | sprites: <span id="spriteCount">1</span></div>
  <div id="paper"></div>
  
  <script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script>
  <!--<script src="https://s2.ssl.qhres.com/!39729fa5/sprite2-1.0.0.js"></script>-->
  <script src="/js/spritejs.js"></script>
  <script>
const paper = spritejs.Paper2D('#paper'),
      fglayer = paper.layer('fglayer'),
      Sprite = spritejs.Sprite

paper.setResolution(1600, 1200) 

const birdsJsonUrl = 'https://s5.ssl.qhres.com/static/5f6911b7b91c88da.json'
const birdsRes = 'https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png'

paper.preload([birdsRes, birdsJsonUrl])
.then(() => {
  const bird = new Sprite()
  bird.attr({
    textures: [
      'bird1.png'
    ],
    anchor: [0.5, 0.5],
    pos: [600, 600],
  })

  let i = 0
  setInterval(() => {
    bird.textures = `bird${++i % 2 + 1}.png`
  }, 100)

  fglayer.appendChild(bird)

  const bird2 = new Sprite()
  bird2.attr({
    textures: [
      'bird1.png'
    ],
    anchor: [0.5, 0.5],
    pos: [600, 600],
  })

  fglayer.appendChild(bird2)

  bird.animate([
    {transform: {rotate: 0, translate: [0, 150]}},
    {transform: {rotate: 360, translate: [0, 150]}},
  ], {
    duration: 1000,
    iterations: Infinity,
    direction: 'reverse',
  })

  bird2.animate([
    {transform: {scale: [1, 0.5]}},
    {transform: {scale: [1, 1]}},
  ], {
    duration: 1000,
    iterations: Infinity,
    direction: 'alternate',
  })

  // let startTime = Date.now(), T = 2000
  // requestAnimationFrame(function update() {
  //   let p = (Date.now() - startTime) / T 
  //   //bird.cache = null
  //   bird.attr({
  //     transform: {rotate: 360 * p, translate: [0, 50]}
  //   }) 
  //   requestAnimationFrame(update)   
  // })

})
  </script>
</body>
</html>